<template>
    <el-dialog title="收货地址" :visible.sync="showEditDialog">
        <!-- <el-form> -->
        
            <el-input v-model="receiverName" placeholder="收货人姓名" ></el-input>
            <el-input v-model="receiverMobile" placeholder="收货人电话"></el-input>
    <el-select v-model="province" @change="updataCity();updataSub()" placeholder="请选择省份">
        <el-option
        v-for="item in addarea"
        :key="item.id"
        :label="item.name"
        :value="item.name">
        </el-option>
    </el-select>
    <el-select
        v-model="city"
        collapse-tags
        style="margin-left: 20px;"
        @change="updataSub()"

        placeholder="请选择城市">
        <el-option
        v-for="item in cityArr"
        :key="item.id"
        :label="item.name"
        :value="item.name">
        </el-option>
    </el-select>
    <el-select
        v-model="area"
        collapse-tags
        style="margin-left: 20px;"
        placeholder="请选择区县">
        <el-option
        v-for="item in subArr"
        :key="item"
        :label="item"
        :value="item">
        </el-option>
  </el-select>
    <el-input
    placeholder="详细地址"
    v-model="addr"
    clearable>
    </el-input>

        <!-- </el-form> -->
        <div slot="footer" class="dialog-footer">
            <el-button @click="showEditDialog = false">取 消</el-button>
            <el-button @click="submitAddr();showEditDialog = false" >确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>

import http from '../../core/HttpRequest'
export default {
    data: () => ({
        province:'',
        city:'',
        area:'',
        addr:'',
        receiverName:'',
        receiverMobile:'',
        cityArr:[],
        subArr:[],
        // jsons: 
        //     {
        //         province:'',//长度（子订单个数）
        //         city:'',//用户id
        //         area:'',//商品id
        //         addr:'',//商品个数
        //         userId:2,
        //         receiverName:'',
        //         receiverMobile:''
        //     },

        showEditDialog: false,
        addarea:[
            {
            id:1,
            name: '北京',
            sub:[
                {
                    id:1,
                    name: '北京',
                    sub: ['大兴区','东城区','朝阳区']
                }
            ]
        },
        {
            id:2,
            name: '四川省',
            sub:[
                {
                    id:1,
                    name: '成都市',
                    sub: ['双流区','新都区','成华区','高新区','青羊区','锦江区']
                },{
                    id:2,
                    name: '遂宁市',
                    sub: ['船山区','大英县','安居区','射洪县','蓬溪县']
                },{
                    id:3,
                    name: '自贡市',
                    sub: ['大安区','自流井区','贡井区','沿滩区','荣县','富顺区']
                },{
                    name: '泸州市',
                    sub: ['江阳区','纳溪区','龙马潭区','泸县','合江县','叙永县','古蔺区']
                },
            ]
        },
        {
            id:3,
            name: '湖北',
            sub:[
                {
                    id:1,
                    name: '武汉市',
                    sub: ['武昌区','洪山区','江夏区','蔡甸区','江岸区']
                },{
                    id:2,
                    name: '孝感市',
                    sub: ['孝昌县','孝南县','宝安区','龙岗区']
                },{
                    id:3,
                    name: '珠海市',
                    sub: ['香洲区','金湾区']
                },{
                    id:4,
                    name: '汕头市',
                    sub: ['金平区','濠江区','潮南区','龙湖区']
                },{
                    id:5,
                    name: '佛山市',
                    sub: ['禅城区','三水区','南海区']
                }
            ]
        },
        {
            id:4,
            name: '上海市',
            sub:[
                {
                    id:1,
                    name: '上海市',
                    sub: ['普陀区','静安区','杨浦区','黄浦区','南汇区','嘉定区','徐汇区']
                }
            ]
        }
        ]
        
    }),
    methods: {
        submitAddr(){
            let adda = new URLSearchParams()
            adda.append('province', this.province), 
            adda.append('city', this.city),
            adda.append('area', this.area), 
            adda.append('addr', this.addr), 
            adda.append('userId',2)
            adda.append('receiverName', this.receiverName), 
            adda.append('receiverMobile', this.receiverMobile),
            
            http({
                method: "post",
                url: `/orderNum/add`,
                data: adda
            })
            .then(res=> {
                this.addComment()
                this.movies = res.data.data.hot
            })
        },
        updataCity:function(){ 
            this.cityArr=''
                this.addarea.forEach((it)=>{
                    if(it.name == this.province){
                        this.cityArr = it.sub;
                    }
                });
                //初始化默认值
                this.city = this.cityArr[0].name;
            },
            //更新区数据
            updataSub:function(){ 
                this.cityArr.forEach((item)=>{
                    if(item.name == this.city){
                        this.subArr = item.sub;
                    }
                });
                this.area = this.subArr[0];
            },
            addComment() {
    //添加完评论后发射监听事件，param是要添加的那条评论消息
            this.$emit('add-comment')
            }
    },
}
</script>

<style>

</style>